<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-06-18 14:15:43
 * @LastEditTime: 2024-06-18 20:07:00
-->
<script lang="ts" setup>
import { IRoutes, IMeta } from "../../index.d";
import { isExternal } from "@/utils/index";
defineProps({
  menuList: { type: Array<IRoutes<IMeta>>, required: true },
});
</script>
<template>
  <template v-for="(item, index) in menuList">
    <!-- 有次级菜单的,则展开子选项-->
    <el-sub-menu
      v-if="item.children && item.children.length > 0"
      :index="item.path"
    >
      <template #title>
        <i :class="`iconfont icon-` + item.meta.icon" style="font-size: 22px" />
        <span style="padding-left: 10px">{{ item.meta.title }}</span>
      </template>
      <!-- 递归,实现无限级展开 -->
      <menu-item :menuList="item.children" :is-nest="true" />
    </el-sub-menu>

    <!-- 没有次级菜单的 -->
    <el-menu-item
      v-if="item.children != null && item.children.length == 0"
      :index="isExternal(item.path) ? '' : item.path"
      :key="index"
    >
      <i :class="`iconfont icon-` + item.meta.icon" style="font-size: 22px" />
      <template #title>
        <!-- if 为外部链接则进行打开新的页面跳转 -->
        <a v-if="isExternal(item.path)" :href="item.path" target="_blank">
          <span style="padding-left: 10px">{{ item.meta.title }}</span>
        </a>
        <!-- 否则 -->
        <span style="padding-left: 10px" v-else>{{ item.meta.title }}</span>
      </template>
    </el-menu-item>
  </template>
</template>
